<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5_溢出文本替换为省略号</title>
    <style>
        div{
            background-color: yellow;
            /* 溢出必须先预设所在区域的大小*/
            width: 200px;
            /* 一下三句话为组合代码,缺一不可*/
            white-space: nowrap;/*不允许换行*/
            overflow:hidden;/*溢出部分隐藏*/
            text-overflow: ellipsis;/*溢出文本替换为省略号*/
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci aliquam asperiores atque autem blanditiis consectetur consequatur consequuntur cum cumque delectus deleniti dicta dignissimos distinctio doloremque ducimus ea eaque earum eius eligendi enim eos esse est et eveniet
    </div>
</body>
</html>